<template>
  <div>
    <router-link to="/home"
      ><van-nav-bar title="猫眼电影" left-arrow
    /></router-link>
    <div class="input-login">
      <div class="input-phone">
        <input type="text" placeholder="请输入手机号" v-model="phone" />
        <input class="input-phone2" type="button" value="发送验证码" @click="validation" disabled />
      </div>
      <div><input v-model="sms" type="text" placeholder="请输入短信验证码" /></div>
      <input class="input-click" type="button" value="登录" />
      <p>未注册的手机号将自动生成新账号</p>
      <h4>© 猫眼电影 客服电话：<span>400-670-5335</span></h4>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      phone: '',
      sms:'',
      disabled:true,
    }
  },
  methods:{
    validation(){
      
    }
  }
};
</script>

<style>
.van-nav-bar__content {
  background-color: #df2d2d;
  height: 45px;
}
.van-nav-bar__content .van-nav-bar__title,
.van-nav-bar__content .van-nav-bar__arrow {
  color: white;
}
.input-login {
  width: 80.5%;
  height: 284px;
  padding: 36px;
}
.input-login input {
  border: none;
  width: 78%;
  height: 41px;
  color: #999999;
}
.input-login .input-phone2 {
  width: 22%;
  background: rgb(220, 220, 220);
  height: 24px;
  border-radius: 5px;
  padding: 0 3px;
}
.input-login .input-click {
  width: 100%;
  height: 35px;
  background: rgb(229, 229, 229);
  border-radius: 10px;
  margin-top: 15px;
}
p {
  text-align: center;
  color: #999999;
  padding: 12px 0;
}
h4 {
  text-align: center;
  font-size: 14px;
  color: #000;
}
h4 span {
  color: #df2d2d;
}
</style>
